<!--
 * @Descripttion: 字典选择器组件演示
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2021年8月3日15:51:20
 * @LastEditors:
 * @LastEditTime:
-->

<template>
  <el-main>
    <el-alert
      title="封装el-select支持异步获取数据,以及根据字典名获取数据,继承el-select全部的属性和事件"
      type="success"
      style="margin-bottom: 20px"
    ></el-alert>

    <el-row :gutter="15">
      <el-col :lg="12">
        <el-card shadow="never" header="异步单选">
          <sc-select
            v-model="value"
            :api-obj="$API.system.dic.get"
            clearable
            filterable
            style="width: 100%"
          ></sc-select>
        </el-card>
      </el-col>
      <el-col :lg="12">
        <el-card shadow="never" header="异步多选">
          <sc-select
            v-model="value2"
            :api-obj="$API.system.dic.get"
            clearable
            filterable
            multiple
            style="width: 100%"
          ></sc-select>
        </el-card>
      </el-col>
      <el-col :lg="12">
        <el-card shadow="never" header="字典选择器">
          <sc-select
            v-model="value3"
            dic="notice"
            clearable
            filterable
            style="width: 100%"
          ></sc-select>
        </el-card>
      </el-col>
      <el-col :lg="12">
        <el-card shadow="never" header="自定义模板">
          <sc-select
            v-model="value4"
            dic="notice"
            clearable
            filterable
            placeholder="自定义placeholder"
            style="width: 100%"
          >
            <template #option="{ data }">
              <span style="float: left">{{ data.label }}</span>
              <span style="float: right; color: #999; font-size: 13px">{{ data.value }}</span>
            </template>
          </sc-select>
        </el-card>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
export default {
  name: 'Scselect',
  data() {
    return {
      value: '3',
      value2: ['1', '3'],
      value3: '',
      value4: ''
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style></style>
